React Router v6: Ovladavanje navigacijskim obrascima za moderne web aplikacije

React Router v6 je moćna i fleksibilna biblioteka za usmjeravanje u React aplikacijama. Omogućuje vam stvaranje single-page aplikacija (SPA) s besprijekornim korisničkim iskustvom upravljanjem navigacijom bez potpunog ponovnog učitavanja stranice. Ovaj blog post će se detaljno baviti ključnim navigacijskim obrascima koristeći React Router v6, pružajući vam znanje i primjere za izradu robusnih i korisnički prihvatljivih web aplikacija.

Razumijevanje osnovnih koncepata React Routera v6

Prije nego što se upustimo u specifične obrasce, pregledajmo neke temeljne koncepte:

• Deklarativno usmjeravanje: React Router koristi deklarativni pristup, gdje definirate svoje rute kao React komponente. To čini vašu logiku usmjeravanja jasnom i lakom za održavanje.
• Komponente: Osnovne komponente uključuju BrowserRouter, HashRouter, MemoryRouter, Routes i Route.
• Hookovi: React Router pruža hookove kao što su useNavigate, useLocation, useParams i useRoutes za pristup informacijama o usmjeravanju i manipulaciju navigacijom.

1. Deklarativno usmjeravanje s <Routes> i <Route>

Temelj React Routera v6 leži u deklarativnom usmjeravanju. Svoje rute definirate pomoću komponenata <Routes> i <Route>. Komponenta <Routes> djeluje kao spremnik za vaše rute, a komponenta <Route> definira određenu rutu i komponentu koja će se prikazati kada ta ruta odgovara trenutnom URL-u.

Primjer: Osnovna konfiguracija ruta

Ovdje je osnovni primjer postavljanja ruta za jednostavnu aplikaciju:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";

function App() {
  return (
    
      
        } />
        } />
        } />
      
    
  );
}

export default App;

U ovom primjeru definiramo tri rute:

• /: Prikazuje Home komponentu.
• /about: Prikazuje About komponentu.
• /contact: Prikazuje Contact komponentu.

Komponenta BrowserRouter omogućuje usmjeravanje temeljeno na povijesti preglednika. React Router uspoređuje trenutni URL s definiranim rutama i prikazuje odgovarajuću komponentu.

2. Dinamičke rute s URL parametrima

Dinamičke rute omogućuju vam stvaranje ruta koje mogu rukovati različitim vrijednostima u URL-u. Ovo je korisno za prikazivanje sadržaja na temelju jedinstvenog identifikatora, kao što je ID proizvoda ili ID korisnika. React Router v6 koristi simbol : za definiranje URL parametara.

Primjer: Prikazivanje detalja proizvoda

Recimo da imate aplikaciju za e-trgovinu i želite prikazati detalje za svaki proizvod na temelju njegovog ID-a. Možete definirati dinamičku rutu poput ove:

import { BrowserRouter, Routes, Route, useParams } from "react-router-dom";

function ProductDetails() {
  const { productId } = useParams();

  // Dohvati detalje proizvoda na temelju productId
  // ...

  return (
    

      
Detalji proizvoda
      
ID proizvoda: {productId}
      {/* Ovdje prikažite detalje proizvoda */}
    
  );
}

function App() {
  return (
    
      
        } />
      
    
  );
}

export default App;

U ovom primjeru:

• /products/:productId definira dinamičku rutu gdje je :productId URL parametar.
• Hook useParams koristi se za pristup vrijednosti parametra productId unutar komponente ProductDetails.
• Zatim možete koristiti productId za dohvaćanje odgovarajućih detalja o proizvodu iz vašeg izvora podataka.

Primjer internacionalizacije: Rukovanje jezičnim kodovima

Za višejezičnu web stranicu, mogli biste koristiti dinamičku rutu za rukovanje jezičnim kodovima:

} />

Ova ruta bi odgovarala URL-ovima poput /en/about, /hr/about i /de/about. Parametar lang se tada može koristiti za učitavanje odgovarajućih jezičnih resursa.

3. Programatska navigacija s useNavigate

Iako je deklarativno usmjeravanje izvrsno za statičke poveznice, često je potrebno programatski navigirati na temelju korisničkih radnji ili logike aplikacije. React Router v6 za tu svrhu pruža hook useNavigate. useNavigate vraća funkciju koja vam omogućuje navigaciju na različite rute.

Primjer: Preusmjeravanje nakon slanja obrasca

Recimo da imate slanje obrasca i želite preusmjeriti korisnika na stranicu s porukom o uspjehu nakon što je obrazac uspješno poslan:

import { useNavigate } from "react-router-dom";

function MyForm() {
  const navigate = useNavigate();

  const handleSubmit = async (event) => {
    event.preventDefault();

    // Pošalji podatke obrasca
    // ...

    // Preusmjeri na stranicu uspjeha nakon uspješnog slanja
    navigate("/success");
  };

  return (
    

      {/* Polja obrasca */}
      Pošalji
    
  );
}

export default MyForm;

U ovom primjeru:

• Koristimo hook useNavigate kako bismo dobili funkciju navigate.
• Nakon što je obrazac uspješno poslan, pozivamo navigate("/success") kako bismo preusmjerili korisnika na rutu /success.

Prijenos stanja (state) tijekom navigacije

Također možete proslijediti stanje (state) zajedno s navigacijom koristeći drugi argument funkcije navigate:

navigate("/confirmation", { state: { orderId: "12345" } });

To vam omogućuje prijenos podataka ciljnoj komponenti, kojima se može pristupiti pomoću hooka useLocation.

4. Ugniježđene rute i rasporedi (Layouts)

Ugniježđene rute omogućuju vam stvaranje hijerarhijskih struktura usmjeravanja, gdje je jedna ruta ugniježđena unutar druge. Ovo je korisno za organiziranje složenih aplikacija s više razina navigacije. To pomaže u stvaranju rasporeda (layouta) gdje su određeni elementi korisničkog sučelja dosljedno prisutni u cijelom dijelu aplikacije.

Primjer: Odjeljak korisničkog profila

Recimo da imate odjeljak korisničkog profila s ugniježđenim rutama za prikaz informacija o profilu korisnika, postavkama i narudžbama:

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Profile() {
  return (
    

      
Korisnički profil
      

        

          Informacije o profilu
        
        

          Postavke
        
        

          Narudžbe
        
      

      
        } />
        } />
        } />
      
    
  );
}

function ProfileInformation() {
  return 
Komponenta s informacijama o profilu
;
}

function Settings() {
  return 
Komponenta s postavkama
;
}

function Orders() {
  return 
Komponenta s narudžbama
;
}

function App() {
  return (
    
      
        } />
      
    
  );
}

export default App;

U ovom primjeru:

• Ruta /profile/* odgovara bilo kojem URL-u koji započinje s /profile.
• Komponenta Profile prikazuje navigacijski izbornik i <Routes> komponentu za rukovanje ugniježđenim rutama.
• Ugniježđene rute definiraju komponente koje se prikazuju za /profile/info, /profile/settings i /profile/orders.

Znak * u roditeljskoj ruti je ključan; označava da bi roditeljska ruta trebala odgovarati bilo kojoj pod-putanji, omogućujući ispravno podudaranje ugniježđenih ruta unutar komponente Profile.

5. Rukovanje pogreškama "Nije pronađeno" (404)

Bitno je rukovati slučajevima kada korisnik dođe na rutu koja ne postoji. React Router v6 to olakšava pomoću "catch-all" (sveobuhvatne) rute.

Primjer: Implementacija 404 stranice

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function NotFound() {
  return (
    

      
404 - Nije pronađeno
      
Stranica koju tražite ne postoji.
      Vrati se na početnu stranicu
    
  );
}

function App() {
  return (
    
      
        } />
        } />
        } />
      
    
  );
}

U ovom primjeru:

• Ruta <Route path="*" element={<NotFound />} /> je "catch-all" ruta koja odgovara bilo kojem URL-u koji se ne podudara ni s jednom drugom definiranom rutom.
• Važno je postaviti ovu rutu na kraj <Routes> komponente tako da se podudara samo ako se nijedna druga ruta ne podudara.

6. Strategije učitavanja podataka s React Router v6

React Router v6 ne uključuje ugrađene mehanizme za učitavanje podataka kao njegov prethodnik (React Router v5 s `useRouteMatch`). Međutim, pruža alate za učinkovitu implementaciju različitih strategija učitavanja podataka.

Opcija 1: Dohvaćanje podataka u komponentama

Najjednostavniji pristup je dohvaćanje podataka izravno unutar komponente koja prikazuje rutu. Možete koristiti useEffect hook za dohvaćanje podataka kada se komponenta montira ili kada se promijene URL parametri.

import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";

function ProductDetails() {
  const { productId } = useParams();
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchProduct() {
      try {
        const response = await fetch(`/api/products/${productId}`);
        if (!response.ok) {
          throw new Error(`HTTP pogreška! status: ${response.status}`);
        }
        const data = await response.json();
        setProduct(data);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    }

    fetchProduct();
  }, [productId]);

  if (loading) return 
Učitavanje...
;
  if (error) return 
Greška: {error.message}
;
  if (!product) return 
Proizvod nije pronađen
;

  return (
    

      
{product.name}
      
{product.description}
    
  );
}

export default ProductDetails;

Ovaj pristup je jednostavan, ali može dovesti do dupliciranja koda ako trebate dohvaćati podatke u više komponenata. Također je manje učinkovit jer dohvaćanje podataka započinje tek nakon što je komponenta montirana.

Opcija 2: Korištenje prilagođenog hooka za dohvaćanje podataka

Da biste smanjili dupliciranje koda, možete stvoriti prilagođeni hook koji enkapsulira logiku dohvaćanja podataka. Ovaj hook se zatim može ponovno koristiti u više komponenata.

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP pogreška! status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

Zatim, možete koristiti ovaj hook u svojim komponentama:

import { useParams } from "react-router-dom";
import useFetch from "./useFetch";

function ProductDetails() {
  const { productId } = useParams();
  const { data: product, loading, error } = useFetch(`/api/products/${productId}`);

  if (loading) return 
Učitavanje...
;
  if (error) return 
Greška: {error.message}
;
  if (!product) return 
Proizvod nije pronađen
;

  return (
    

      
{product.name}
      
{product.description}
    
  );
}

export default ProductDetails;

Opcija 3: Korištenje biblioteke za usmjeravanje s mogućnostima dohvaćanja podataka (TanStack Router, Remix)

Biblioteke poput TanStack Router i Remix nude ugrađene mehanizme za dohvaćanje podataka koji se besprijekorno integriraju s usmjeravanjem. Ove biblioteke često pružaju značajke kao što su:

• Loaderi (učitavači): Funkcije koje se izvršavaju *prije* nego što se ruta prikaže, omogućujući vam da dohvatite podatke i proslijedite ih komponenti.
• Akcije: Funkcije koje rukuju slanjem obrazaca i mutacijama podataka.

Korištenje takve biblioteke može drastično pojednostaviti učitavanje podataka i poboljšati performanse, posebno za složene aplikacije.

Renderiranje na strani poslužitelja (SSR) i Generiranje statičkih stranica (SSG)

Za poboljšani SEO i početne performanse učitavanja, razmislite o korištenju SSR-a ili SSG-a s okvirima poput Next.js ili Gatsby. Ovi okviri omogućuju vam dohvaćanje podataka na poslužitelju ili tijekom vremena izrade i posluživanje unaprijed renderiranog HTML-a klijentu. To eliminira potrebu da klijent dohvaća podatke pri početnom učitavanju, što rezultira bržim i SEO-prijateljskijim iskustvom.

7. Rad s različitim vrstama Routera

React Router v6 pruža različite implementacije routera koje odgovaraju različitim okruženjima i slučajevima upotrebe:

• BrowserRouter: Koristi HTML5 history API (pushState, replaceState) za navigaciju. To je najčešći izbor za web aplikacije koje se izvode u okruženju preglednika.
• HashRouter: Koristi hash dio URL-a (#) za navigaciju. Ovo je korisno za aplikacije koje trebaju podržavati starije preglednike ili koje su postavljene na poslužitelje koji ne podržavaju HTML5 history API.
• MemoryRouter: Čuva povijest vašeg "URL-a" u memoriji (niz URL-ova). Korisno u okruženjima kao što su React Native i za testiranje.

Odaberite vrstu routera koja najbolje odgovara zahtjevima i okruženju vaše aplikacije.

Zaključak

React Router v6 pruža sveobuhvatno i fleksibilno rješenje za usmjeravanje u React aplikacijama. Razumijevanjem i primjenom navigacijskih obrazaca o kojima smo raspravljali u ovom blog postu, možete izraditi robusne, korisnički prihvatljive i održive web aplikacije. Od deklarativnog usmjeravanja s <Routes> i <Route> do dinamičkih ruta s URL parametrima, programatske navigacije s useNavigate i učinkovitih strategija za učitavanje podataka, React Router v6 vam omogućuje stvaranje besprijekornih navigacijskih iskustava za vaše korisnike. Razmislite o istraživanju naprednih biblioteka za usmjeravanje i SSR/SSG okvira za još veću kontrolu i optimizaciju performansi. Ne zaboravite prilagoditi ove obrasce specifičnim zahtjevima vaše aplikacije i uvijek dajte prednost jasnom i intuitivnom korisničkom iskustvu.